<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>与木共舞板材网</title>
    <link rel="stylesheet" href="../../css/weui.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <section id="app">
        <header class="login-logo">
            <img src="img/logo.png" />
        </header>
        <section class="login-form reg-form">
            <dl>
                <dd><input type="tel" maxlength="11" v-model="sendCodeData.phone" placeholder="请输入手机号" /></dd>
                <p @click="sendCode">{{sendCodeTxt}}</p>
            </dl>
            <dl>
                <dd><input type="tel" maxlength="6" v-model="submitData.smscaptcha" placeholder="验证码" /></dd>
            </dl>
            <dl>
                <dd><input type="password" maxlength="20" v-model="submitData.pwd" placeholder="设置密码" /></dd>
            </dl>
            <dl>
                <dd><input type="password" maxlength="20" v-model="submitData.pwd2" placeholder="请再次输入密码" /></dd>
            </dl>
            <span>已有账号！<a href="">立即登录</a></span>
            <button class="submit-btn" @click="register">立即注册</button>
        </section>
        <aside>
            <transition name="fade">
                <div class="js_dialog" v-show="isMessage">
                    <div class="weui-mask"></div>
                    <div class="weui-dialog">
                        <div class="weui-dialog__bd">{{message}}</div>
                        <div class="weui-dialog__ft">
                            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="closeMessage">知道了</a>
                        </div>
                    </div>
                </div>
            </transition>
            <div v-show="isToast">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                    <p class="weui-toast__content">{{toast}}</p>
                </div>
            </div>
            <div v-show="isToastReg">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content">正在注册</p>
                </div>
            </div>
        </aside>
    </section>
    <!-- js -->
    <aside>
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: '',
                    isMessage: false,
                    toast: '',
                    isToast: false,
                    sendCodeTxt: '发送验证码',
                    isSend: true,
                    isReg: true,
                    isToastReg: false,
                    sendUrl: '',
                    regUrl: '',
                    sendCodeData: {
                        sms_token: '',
                        phone: ''
                    },
                    submitData: {
                        phone: '',
                        smscaptcha: '',
                        pwd: '',
                        pwd2: ''
                    }
                },
                mounted() {
                    this.sendCodeData.sms_token = "{$sms_token}";
                    this.sendUrl = "{:url('wap/user/smsSend')}";
                    this.regUrl = "{:url('wap/user/reg')}";
                },
                methods: {
                    closeMessage() {
                        this.isMessage = false
                    },
                    sendCode() {
                        if (!this.isSend) return false;
                        let status = this._verifyPhone();
                        if (!status) return false;
                        this.isSend = false;
                        this._sendCode()
                    },
                    register() {
                        if (!this.isReg) return false;
                        let status = this._verifyReg();
                        if (!status) return false;
                        this.submitData.phone = this.sendCodeData.phone;
                        this.isReg = false;
                        this.isToastReg = true;
                        this._register()
                    },
                    _countDown() {
                        let mum = 60;
                        let timer = setInterval(() => {
                            num--;
                            this.sendCodeTxt = `${num} 秒后重发`;
                            if (num < 1) {
                                clearInterval(timer);
                                this.sendCodeTxt = "重新发送";
                                this.isSend = true;
                            }
                        }, 1000)
                    },
                    _verifyPhone() {
                        let regPhone = /^1(3|4|5|7|8)\d{9}$/;
                        if (!this.sendCodeData.phone) return this._feedbackOpen('手机号码不得为空');
                        if (!regPhone.test(this.sendCodeData.phone)) return this._feedbackOpen('手机号码格式不正确');
                        return true
                    },
                    _verifyReg() {
                        const status = this._verifyPhone();
                        if (!status) return false;
                        if (!this.submitData.smscaptcha) return this._feedbackOpen('验证码不得为空');
                        if (!this.submitData.pwd) return this._feedbackOpen('密码不得为空');
                        if (!this.submitData.pwd2) return this._feedbackOpen('请再次输入密码');
                        if (this.submitData.pwd !== this.submitData.pwd2) return this._feedbackOpen('两次输入密码不一致');
                        return true;
                    },
                    _feedbackOpen(message) {
                        this.message = message;
                        this.isMessage = true;
                    },
                    _toast(message) {
                        this.toast = message;
                        this.isToast = true;
                        setTimeout(() => {
                            this.isToast = false;
                        }, 2000)
                    },
                    _feedbackClose() {
                        this.isMessage = false;
                    },
                    _sendCode() {
                        axios.post(this.sendUrl, this.sendCodeData).then(res => {
                            console.log(res)
                            this._toast()
                            this._countDown()
                        })
                    },
                    _register() {
                        axios.post(this.regUrl, this.submitData).then(res => {
                            console.log(res);
                            this._toast();
                            this.isToastReg=false;
                        })

                    }
                },
            })
        </script>
    </aside>
    <!-- js -->
</body>

</html>